<template>
  <div>
    <el-dialog width="51%" top="5vh" title="订单详情" :modal-append-to-body="false" :close-on-click-modal="false" :visible.sync="visible">
      <el-form v-loading="loading" :model="dataForm" ref="dataForm" label-width="80px">
        <el-steps :active="currStep" align-center>
          <el-step v-for="(item,index) in stepList" :title="item.label" :key="index" :description="item.time"></el-step>
        </el-steps>
        <div class="title">{{dataForm.rights_type==1?'退款商品':'退货商品'}}</div>
        <el-table :data="dataForm.rights_child_orders" border style="width: 100%">
          <el-table-column prop="date" label="商品图片" width="180" align="center">
            <template slot-scope="scope">
              <img :src="scope.row.goods_img" class="table-img" />
            </template>
          </el-table-column>
          <el-table-column prop="goods_title" label="商品名称" width="180" align="center">
          </el-table-column>
          <el-table-column prop="sku_set_name" label="属性" width="180" align="center">
          </el-table-column>
          <el-table-column prop="refund_num" label="数量" width="180" align="center">
          </el-table-column>
          <el-table-column prop="refund_money" label="小计" align="center">
          </el-table-column>
          <el-table-column fixed="right" header-align="center" align="center" label="操作" v-if="dataForm.rights_refund_status==1&&roleType>=2">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="storage(scope.row)" v-if="dataForm.order_type==1">手动入库</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="count">合计：<label>￥{{dataForm.refund_money}}</label></div>
        <div>
          <div class="title">服务单信息</div>
          <el-row class="ht40 border">
            <el-col :span="4" class="br-left">
              <span>服务单号</span>
            </el-col>
            <el-col :span="18" class="br-right">
              <span>{{dataForm.rights_code}}</span>
            </el-col>
          </el-row>
          <el-row class="ht40 border">
            <el-col :span="4" class="br-left">
              <span>申请状态</span>
            </el-col>
            <el-col :span="18" class="br-right">
              <span>
                <el-tag effect="plain" type="warning" v-if="dataForm.rights_refund_status==0">待退款</el-tag>
                <el-tag effect="plain" type="success" v-if="dataForm.rights_refund_status==1">退款成功</el-tag>
                <el-tag effect="plain" type="danger" v-if="dataForm.rights_refund_status==2">退款失败</el-tag>
              </span>
            </el-col>
          </el-row>
          <el-row class="ht40 border">
            <el-col :span="4" class="br-left">
              <span>订单编号</span>
            </el-col>
            <el-col :span="18" class="br-right">
              <span>{{dataForm.order_code}}</span>
            </el-col>
          </el-row>
          <!-- 				<el-row class="ht40 border">
					<el-col :span="4" class="br-left">
						<span>订单金额</span>
					</el-col>
					<el-col :span="18" class="br-right">
						<span>¥200.00</span>
					</el-col>
				</el-row> -->
          <el-row class="ht40 border">
            <el-col :span="4" class="br-left">
              <span>退款金额</span>
            </el-col>
            <el-col :span="18" class="br-right">
              <span>¥{{dataForm.refund_money}}</span>
            </el-col>
          </el-row>
          <el-row class="ht40 border" v-if="dataForm.pay_mode==5||dataForm.pay_mode==6||dataForm.pay_mode==7||dataForm.pay_mode==8">
            <el-col :span="4" class="br-left">
              <span>退款积分</span>
            </el-col>
            <el-col :span="18" class="br-right">
              <span>{{dataForm.refund_point}}</span>
            </el-col>
          </el-row>
          <el-row class="ht40 border">
            <el-col :span="4" class="br-left">
              <span>申请时间</span>
            </el-col>
            <el-col :span="18" class="br-right">
              <span>{{dataForm.create_time}}</span>
            </el-col>
          </el-row>
          <!-- 				<el-row class="ht40 border">
					<el-col :span="4" class="br-left">
						<span>用户账号</span>
					</el-col>
					<el-col :span="18" class="br-right">
						<span>{{dataForm.mobile}}</span>
					</el-col>
				</el-row> -->
          <!-- 				<el-row class="ht40 border">
					<el-col :span="4" class="br-left">
						<span>联系人</span>
					</el-col>
					<el-col :span="18" class="br-right">
						<span>大梨</span>
					</el-col>
				</el-row> -->
          <el-row class="ht40 border">
            <el-col :span="4" class="br-left">
              <span>下单人电话</span>
            </el-col>
            <el-col :span="18" class="br-right">
              <span>{{dataForm.mobile}}</span>
            </el-col>
          </el-row>
          <el-row class="ht40 border" v-if="dataForm.order_type==1">
            <el-col :span="4" class="br-left">
              <span>收货人姓名</span>
            </el-col>
            <el-col :span="18" class="br-right">
              <span>{{dataForm.receiver}}</span>
            </el-col>
          </el-row>
          <el-row class="ht40 border" v-if="dataForm.order_type==2">
            <el-col :span="4" class="br-left">
              <span>服务人姓名</span>
            </el-col>
            <el-col :span="18" class="br-right">
              <span>{{dataForm.receiver}}</span>
            </el-col>
          </el-row>
          <el-row class="ht40 border">
            <el-col :span="4" class="br-left">
              <span>收货人电话</span>
            </el-col>
            <el-col :span="18" class="br-right">
              <span>{{dataForm.receiver_mobile}}</span>
            </el-col>
          </el-row>
          <el-row class="ht40 border">
            <el-col :span="4" class="br-left">
              <span>售后原因</span>
            </el-col>
            <el-col :span="18" class="br-right">
              <span>{{dataForm.reason}}</span>
            </el-col>
          </el-row>
          <el-row class="ht40 border">
            <el-col :span="4" class="br-left">
              <span>问题描述</span>
            </el-col>
            <el-col :span="18" class="br-right">
              <span>{{dataForm.caption}}</span>
            </el-col>
          </el-row>
          <el-row class="border row-img" v-if="dataForm.voucher_images&&dataForm.voucher_images.length > 0">
            <el-col :span="4" class="br-left">
              <span>凭证照片</span>
            </el-col>
            <el-col :span="18" class="br-right">
              <div>
                <img class="table-img mr10" v-for="(item,i) in dataForm.voucher_images" :key="i" :src="item" />
              </div>
            </el-col>
          </el-row>
          <el-row class="ht40 border" v-if="dataForm.rights_refund_status !=0">
            <el-col :span="4" class="br-left">
              <span>处理备注</span>
            </el-col>
            <el-col :span="18" class="br-right">
              <span>{{dataForm.rights_refund_status==1?'已同意退款':dataForm.rights_refund_status==2?'退款失败':''}}</span>
            </el-col>
          </el-row>
          <el-row class="ht40 border" v-if="dataForm.user_id !=0" v-show="false">
            <el-col :span="4" class="br-left">
              <span>用户ID</span>
            </el-col>
            <el-col :span="18" class="br-right">
              <span>{{dataForm.user_id}}</span>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="currType !='view'">
<!--        <el-button type="primary" @click="revokeRights()">撤销维权</el-button>-->
        <el-button type="success" @click="operate('agree')">{{dataForm.rights_type==1?'同意退款':'同意退货'}}</el-button>
        <el-button type="warning" @click="dataSubmit()">{{dataForm.rights_type==1?'拒绝退款':'退拒绝货'}}</el-button>
      </span>
      <el-dialog width="300px" title="入库" :append-to-body="true" :visible.sync="storageVisible">
        <el-form ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="100px">
          <el-form-item label="入库数量" prop="refundNum">
            <el-input maxlength="50" v-model="refundNum" placeholder="请输入入库数量"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="storageVisible = false">取消</el-button>
          <el-button type="primary" @click="dataFormSubmit()">提交</el-button>
        </span>
      </el-dialog>

    </el-dialog>

    <!-- 拒绝退货 -->
    <el-dialog :title="dataForm.rights_type==1?'拒绝退款':'退拒绝货'" :modal-append-to-body="true" :close-on-click-modal="false" :visible.sync="visibleApply" width="30%">
      <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
        <el-form-item label="拒绝理由">
          <el-select placeholder="请选择理由" v-model="reason_txt">
            <el-option v-for="item in reason" :key="item.name" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="其他" v-if="reason_txt=='其他'">
          <el-input type="textarea" v-model="reason_other_txt" :rows="{min:3}" maxlength="50" placeholder="请输入理由"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visibleApply = false">取消</el-button>
        <el-button type="primary" @click="operate('refuse')">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import orderService from '@/api/orderService.js'
export default {
  data () {
    return {
      reason: [{
        id: 1,
        name: '商品不支持退货/退款'
      }, {
        id: 2,
        name: '退款金额不对'
      }, {
        id: 3,
        name: '其他'
      }],
      reason_txt: '',
      reason_other_txt: '',
      visible: false,
      storageVisible: false,
      visibleApply: false,
      refundNum: '',
      timeList: [],
      param: {
        user_id: '',
        rights_order_id: '',
        rights_child_order_id: '',
        num: ''
      },
      dataForm: {},
      loading: false,
      currType: '',
      currId: '',
      stepList: [],
      currStep: 0
    }
  },
  computed: {
    roleType: {
      get () { return this.$store.state.user.roleType }
    }
  },
  methods: {
    dataSubmit () {
      this.visible = false
      this.visibleApply = true
    },
    init (id, type) {
      this.dataForm = {}
      this.currId = id || null
      this.currType = type
      this.visible = true
      this.searchDetail()
    },
    searchDetail () {
      this.loading = true
      orderService.afterSaleDetail(this.currId).then(res => {
        if (res.data && res.data.code == 200) {
          this.dataForm = res.data.data
          this.timeList = res.data.data.rights_order_operate_records
          this.param.user_id = res.data.data.user_id
          this.param.rights_order_id = this.currId
          this.dealStep()
        }
        this.loading = false
      }).then(res => {
        this.loading = false
      })
    },
    // 商家手动为单品增加库存
    storage (e) {
      this.storageVisible = true
      this.param = {
        user_id: e.user_id,
        rights_order_id: e.rights_id,
        rights_child_order_id: e.id,
        num: e.refund_num
      }
    },
    dataFormSubmit (e) {
      if (this.refundNum == '') {
        this.$message.error('入库数量不能空')
      } else if (this.refundNum > this.param.num) {
        this.$message.error('入库数量不能大于实际数量')
      } else {
        this.param.num = this.refundNum
        orderService.postSinglegoodsManualInStock(this.param).then(res => {
          if (res.data && res.data.code == 200) {
            this.$message.success('操作成功！')
            this.storageVisible = false
          }
        })
      }
    },
    dealStep () {
      let time1 = '', time2 = '', time3 = '', time4 = '', time = ''
      this.timeList.forEach(element => {
        if (element.rights_operate_status == 0) {
          time = element.create_time
        } else if (element.rights_operate_status == 1) {
          time1 = element.create_time
        } else if (element.rights_operate_status == 2) {
          time2 = element.create_time
        } else if (element.rights_operate_status == 3) {
          time3 = element.create_time
        } else if (element.rights_operate_status == 4) {
          time4 = element.create_time
        }
      })
      this.stepList = [{
        label: this.dataForm.rights_type == 2 ? '退货申请' : '退款申请',
        time: time
      }, {
        label: '商家同意',
        time: time1
      }]
      if (this.dataForm.rights_type == 2) {
        // 退货
        this.stepList.push({
          label: '买家发货',
          time: time2
        }, {
          label: '商家收货',
          time: time3
        })
      }
      this.stepList.push({
        label: '打款',
        time: time4
      })
      this.currStep = this.dataForm.rights_operate_status + 1
      if (this.dataForm.rights_operate_status > 5) {
        this.currStep = null
      }
      if (this.dataForm.rights_operate_status > 7) {
        this.currStep = 5
      }
    },

    // 同意/拒绝
    operate (type) {
      this.visible = false
      let msg = ''
      if (type == 'agree') {
        msg = '是否同意' + (this.dataForm.rights_type == 2 ? '退货申请？' : '退款申请？')
      } else {
        msg = '是否拒绝' + (this.dataForm.rights_type == 2 ? '退货申请？' : '退款申请？')
        if (!this.reason_txt) {
          this.$message.warning('请选择理由后提交!')
          return
        }
        this.param.reason = this.reason_txt
        if (this.param.reason == '其他') {
          if (this.reason_other_txt) {
            this.param.reason = this.reason_other_txt
          } else {
            this.$message.warning('请填写理由后提交!')
            return
          }
        }
      }
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        orderService[type](this.param).then(res => {
          if (res.data && res.data.code == 200) {
            this.$message.success('操作成功！')
            this.$emit('result')
          }
        })
      }).catch(() => {
        this.visible = true
      })
    },

    // 撤销维权
    revokeRights () {
      this.visible = false
      let msg = '确定要撤销用户的维权申请吗？'
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        orderService.revokeRights(this.param).then(res => {
          if (res.data && res.data.code == 200) {
            this.$message.success('操作成功！')
            this.$emit('result')
          }
        })
      }).catch(() => {
        this.visible = true
      })
    }
  }
}
</script>

<style lang="scss">
.ht40 {
  height: 40px;
  line-height: 38px;
}

.border {
  border: 1px solid #cccccc;
  margin-bottom: -1px;
}

.br-left {
  border-right: 1px solid #cccccc;
  text-align: center;
}

.br-right {
  padding-left: 10px;
}

.count {
  padding: 10px 20px;
  text-align: right;
  border: 1px solid #ebeef5;
  border-top: unset;

  label {
    font-weight: bold;
    color: #f04844;
  }
}

.mr10 {
  margin-right: 10px;
}

.row-img {
  height: 100px;
  line-height: 100px;
}

.title {
  margin: 15px auto;
  padding-left: 15px;
  line-height: 14px;
  border-left: 4px solid #17b3a3;
  color: #333333;
}
</style>
